<template>
  <div>
    <div class="toolbar colorMain">
      <el-form :inline="true" size="small">
        <el-form-item label="时间">
          <el-date-picker
            v-model="pickTime1"
            :picker-options="pickerOptions"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-button size="small" type="primary" @click="getData">提交</el-button>
      </el-form>
      <div>走势曲线</div>
      <ve-line :data="chartData1" :settings="chartSettings" />
      <div>走势曲线</div>
      <ve-line :data="chartData2" :settings="chartSettings" />
      <div>走势曲线</div>
      <ve-line :data="chartData3" :settings="chartSettings" />
      <el-table :data="tableData" style="width: 100%" size="small" stripe border fit highlight-current-row >
        <template v-for="(item, index) in key_mapper">
          <el-table-column v-if="item.is_percentage" :key = "index" :prop="item.key" :label="item.name" :min-width="130" :formatter="formatter" sortable>
            <template slot-scope="scope">{{ `${scope.row[item.key]}%` }}</template>
          </el-table-column>
          <el-table-column v-else :key = "index" :prop="item.key" :label="item.name" :min-width="130" :formatter="formatter" sortable/>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getProfitAnalysis } from '@/api/table'
import { pickerOptions, pickTime } from '@/model/DateRange'
import { fixed3 } from '@/utils'

export default {
  name: 'Everyday',
  data() {
    this.chartSettings = {
      axisSite: { right: ['实际利润率'] },
      yAxisType: ['normal', 'normal'],
      yAxisName: ['金额', '实际利润率']
    }
    return {
      pickerOptions,
      key_mapper: [],
      tableData: [],
      chartData1: {
        columns: ['日期', '充值金额', '实际利润率'],
        rows: []
      },
      chartData2: {
        columns: ['日期', '实际利润', '实际利润率'],
        rows: []
      },
      chartData3: {
        columns: ['日期', '整体抽水', '实际利润率'],
        rows: []
      },
      pickTime1: pickTime
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getProfitAnalysis({ time_range: JSON.stringify([`${this.pickTime1[0]} 00:00:00`, `${this.pickTime1[1]} 23:59:59`] || []) }).then(res => {
        this.tableData = res.data.list
        this.chartData1.rows = res.data.list.map(item => {
          return { '日期': item.day, '充值金额': item.recharge_price,
            '实际利润': item.profit, '整体抽水': item.total_choushui, '实际利润率': item.profit_rate }
        }).reverse()
        this.chartData2.rows = this.chartData1.rows
        this.chartData3.rows = this.chartData1.rows
        // debugger
        this.key_mapper = res.data.key_mapper
      }, err => {
        this.$message({ type: 'error', message: err.response.data.msg })
      })
    },
    formatter(row, column, item) {
      // debugger
      return fixed3(item)
    }
  }
}
</script>

<style scoped>

</style>
